<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
		<title>微商城</title>
		<link rel="stylesheet" href="__PUBLIC__/css/frozen.css" />
        <link rel="stylesheet" href="__PUBLIC__/css/iconfont.css" />
        <link rel="stylesheet" href="__PUBLIC__/css/myCss.css" />
		<script src="__PUBLIC__/lib/zepto.min.js"></script>
		<script src="__PUBLIC__/js/frozen.js"></script>
        <script src="__PUBLIC__/js/myjs/ProductList.js"></script>
        <script>
            var Url="{:U('ProDetail','','',0,true)}";
            var seachProUrl="{:U('seachPro','','')}";
            var publicUrl="__PUBLIC__";
        </script>
        <style>
            #fixedLayer {
                position:fixed;
                right: 8px;
                bottom: 55px;
                width:50px;
                height:50px;
                line-height:30px;
                background-color:#414a4f;
                text-align:center;
                border-radius: 5px;
                opacity:0.2;
                
                }
		</style>
    </head>
    
	<body>
		<header class="ui-header ui-header-stable ui-border-b">
			<i class="ui-icon-return" onclick="history.back()"></i>
			<h1>商品中心</h1>
		</header>
        <footer class="ui-footer ui-footer-stable ui-border-t ui-footer-my">
           <ul class="ui-tiled">
                <li onclick="location.href='{:U('index','','',0,true)}'" >
                    <div class="iconfont icon-home"></div>
                </li>
                <li onclick="location.href='{:U('ProductList','','',0,true)}'" >
                    <div class="iconfont icon-shopfill"></div>
                </li>
                <li onclick="location.href='{:U('MyShop','','',0,true)}'">
                    <div class="iconfont icon-people"></div>
                </li>
            </ul>
        </footer>
		<section class="ui-container" style="border-top: 45px solid transparent;padding-bottom:50px;">
            <!--搜索商品-->
            <div class="ui-searchbar-wrap" style="margin-top:2px;background-color:transparent;" >
                <div class="ui-searchbar ui-border-radius">
                    <i class="ui-icon-search"></i>
                    <div class="ui-searchbar-text">输入商品名</div>
                    <div class="ui-searchbar-input"><input value="" type="text" placeholder="搜索商品" autocapitalize="off"></div>
                    <i onclick="$('.ui-searchbar-input').find('input').val('');"  class="ui-icon-close"></i>
                </div>
                <div><button onclick="seachPro();" class="ui-btn" style="color:#777;">搜索</button></div>
            </div>
            <!--
            <div style="background-color:white;height:100px;margin:0px 10px;">
                
            </div>-->
            <!--商品列表-->
			<ul id="proList" class="ui-list ui-list-active ui-border-tb"  >
				<!--商品列表模板-->
                <foreach name='AllPro' item='v'>
                    <if condition="$v.ProStau eq 1">
                        <li  class="ui-border-t ui-tag-freelimit" onclick=GetProDetail({$v.ProID})>
                        <elseif condition="$v.ProStau eq 2"/>
                            <li  class="ui-border-t ui-tag-free" onclick=GetProDetail({$v.ProID})>
                        <elseif condition="$v.ProStau eq 3"/>
                            <li  class="ui-border-t ui-tag-act" onclick=GetProDetail({$v.ProID})>
                        <else/>
                            <li  class="ui-border-t" onclick=GetProDetail({$v.ProID})>
                        </if>
                        <div class="ui-list-img">
                            <span><img src="__PUBLIC__/images/img/{$v.ProImg}" width="100px" height="72px"/></span>
                        </div>
                        <div class="ui-list-info" style="padding-top:10px;padding-bottom:0px;padding-right:10px;">
                            <ul class="ui-row"  >
                                <li class="ui-col ui-col-90" >
                                    <h4 class="ui-nowrap" style="margin:0rem 0rem 0rem 0.03rem;">{$v.ProName}</h4>
                                </li>
                                <li class="ui-col ui-col-100"  >
                                </li> 
                                <li class="ui-col ui-col-67" style="padding-top:7px;" >
                                    <h4 class="ui-nowrap" style="color:#888;font-size:10px;margin:0rem 0rem 0rem 0.03rem;width:80%;">产地：温州鹿城区</h4>
                                </li> 
                                <li class="ui-col ui-col-33" style="padding-top:7px;" >
                                    <if condition="$v.ProNum lt 10">
                                        <h4 class="ui-nowrap" style="float:right;color:#EE2C2C;font-size:12px;">库存{$v.ProNum}</h4>
                                    <elseif condition="$v.ProNum gt 10"/>
                                        <h4 class="ui-nowrap" style="float:right;color:#777;font-size:12px;">库存{$v.ProNum}</h4>
                                    </if>
                                    
                                </li> 
                                <li class="ui-col ui-col-75" style="padding-top:0px;">
                                    <p id="pCount{$v.ProId}" class="ui-nowrap"  style="display:inline;font-size:15px;color:#FF6347;font-weight:bold;">￥{$v.ProPrice}</p> 
                                </li>
                                <li class="ui-col ui-col-25" >
                                    <p id="pPrice{$v.ProId}" class="ui-nowrap " style="float:right;font-size:13px;margin-top:3px;">售出<font color="#EE2C2C">{$v.ProSaleCount}</font>件</p>
                                </li>
                            </ul> 
                        </div>
                    </li>
				</foreach>
			</ul>
            <div  class="ui-loading-wrap">
                <p>加载中</p>
                <i class="ui-loading"></i>
            </div>
            <!--右下角购物车-->
            <div id='fixedLayer' onclick="location.href='{:U('Cart/loadCart','','',0,true)}'">
                 <i  class="ui-icon-cart" style="font-size:50px;color:#ffffff;" ></i>
                <!--
                <div class="ui-reddot-s">
                    <i  class="ui-icon-cart" style="font-size:50px;" onclick="alert('购物车');"></i>
                </div>
                -->
            </div>
		</section>
	</body>
	<script>
            window.onscroll=function(){
            　　var scrollTop = $(this).scrollTop();
            　　var scrollHeight = $(document).height();
            　　var windowHeight = $(this).height();
                console.log(scrollTop + windowHeight);
                console.log('end'+scrollHeight);
            　　if(scrollTop + windowHeight >= scrollHeight-25){
                    
            　　　　$('.ui-loading-wrap').show();
            　　}else{
                    $('.ui-loading-wrap').hide();
                }
            }
            $('.ui-searchbar').on('click',function(){
                $('.ui-searchbar-wrap').addClass('focus');
                $('.ui-searchbar-input input').focus();
            });
            fixedLayer.onmouseover = function(){
                fixedLayer.style.opacity=0.5;
            };
            fixedLayer.onmouseout  = function(){
                fixedLayer.style.opacity=0.2;
            };
    </script>
</html>